<template>
  <div class="player">
    <!-- <img src="../assets/img/album_cover_player.png" alt="" id="play1" /> -->
    <!-- <img src="../assets/img/player_cover.png" alt="" id="play2" /> -->
    <!-- <p id="wei"></p> -->
  </div>

</template>
<!-- 引入组件库 -->
<script>
export default {
  name: "app",

  data() {
    return {};
  },
};
</script>
<style>
.player {
  width: 20%;
  height: 100%;
  z-index: 3;
}

/* #play1,
#play2 {
  position: fixed;
  left: 81%;
  top: 24%;
  width: 200px;
  height: 200px;
} */

#wei {
  color: rgb(255, 255, 255, 0.6);
  position: absolute;
  left: 85%;
  top: 40%;
}

.player-control {
  position: absolute;
  bottom: -2.5%;
  left: 0%;
  width: 100%;
  height: 10%;
  /* border: 1px solid white; */
}

.control {
  position: relative;
  left: 0%;
  top: 0%;
}

#pre,
#next,
#pause {
  width: 35px;
  position: absolute;
  bottom: 30%;
  left: 5%;
}

#pre {
  left: 1.5%;
}

#next {
  left: 8.5%;
}

.play {
  position: absolute;
  left: 10%;
  top: 10%;
}

.long {
  width: 50%;
  height: 1%;
  background: rgb(255, 255, 255, 0.5);
}
</style>
